<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    
    <meta name="referrer" content="no-referrer-when-downgrade">
    
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <script>if (/*@cc_on!@*/false || (!!window.MSInputMethodContext && !!document.documentMode)) window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); </script>
    
    
        <link rel="preload" crossorigin="crossorigin" href="/fonts/roboto/Roboto-Regular.woff2" as="font">
        <link rel="preload" crossorigin="crossorigin" href="/fonts/roboto/Roboto-Bold.woff2" as="font">
    
    
    
        <link rel="shortcut icon" href="/icons/favicon.ico">
    

    
    
        
<link rel="stylesheet" href="/css/mdui.min.v1.0.0.css">

    
    
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/iconfont.css">


    
    

    
        <script data-ad-client="ca-" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    












          


    
    
    <title>
        
            数组的方法 | 吴豪阳的数据库
        
    </title>
    
    
<meta name="generator" content="Hexo 5.4.1"></head>
<body class="mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-teal mdui-theme-accent-blue">
  
  <header class="mdui-appbar mdui-appbar-fixed">
  <div id="toolbar" class="mdui-toolbar mdui-color-theme">
    <button class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#sidebar', swipe: true}"><i class="iconfont icon-menu"></i></button>
    <a href="/" class="mdui-typo-headline">吴豪阳的数据库</a>
    <a href="/" class="header-subtitle mdui-typo-headline"></a>
    <div class="mdui-toolbar-spacer"></div>
    <button class="mdui-btn mdui-btn-icon" mdui-dialog="{target: '#search'}" mdui-tooltip="{content: 'search'}"><i class="iconfont icon-search"></i></button>
  </div>
</header>

<div class="mdui-dialog" id="search">
  
    <div class="search-form">
      <input type="search" class="search-form-input" placeholder="请输入关键字" onfocus="listenSearchFunc()">
    </div>
    <div class="search-result" data-resource="/search.xml"></div>
  
</div>

  <aside id="sidebar" class="mdui-drawer">
    <div class="mdui-tab" mdui-tab>
        <a href="#sidebar-tab1" id="sidebartab" class="mdui-ripple mdui-tab-active">站点概览</a>
        <a href="#sidebar-tab2" id="sidebartab" class="mdui-ripple">关于</a>
    </div>

    
    <div id="sidebar-tab1" class="mdui-p-a-1">
        <div class="mdui-list">
            
                
                <a href="/" class="mdui-list-item mdui-ripple">
                    <div class="mdui-list-item-icon">
                        <i class="iconfont icon-home"></i>
                    </div>
                    <div class="mdui-list-item-content">主页</div>
                </a>
            
                
                <a href="/tags/" class="mdui-list-item mdui-ripple">
                    <div class="mdui-list-item-icon">
                        <i class="iconfont icon-bookmark"></i>
                    </div>
                    <div class="mdui-list-item-content">标签</div>
                </a>
            
                
                <a href="/categories/" class="mdui-list-item mdui-ripple">
                    <div class="mdui-list-item-icon">
                        <i class="iconfont icon-folder"></i>
                    </div>
                    <div class="mdui-list-item-content">分类</div>
                </a>
            
                
                <a href="/archives/" class="mdui-list-item mdui-ripple">
                    <div class="mdui-list-item-icon">
                        <i class="iconfont icon-archive"></i>
                    </div>
                    <div class="mdui-list-item-content">归档</div>
                </a>
            
                
                <a href="/tools/" class="mdui-list-item mdui-ripple">
                    <div class="mdui-list-item-icon">
                        <i class="iconfont icon-tools"></i>
                    </div>
                    <div class="mdui-list-item-content">工具箱</div>
                </a>
            
                
                <a href="/about/" class="mdui-list-item mdui-ripple">
                    <div class="mdui-list-item-icon">
                        <i class="iconfont icon-user"></i>
                    </div>
                    <div class="mdui-list-item-content">关于</div>
                </a>
            
            <div class="mdui-list-item mdui-ripple">
                <div class="mdui-list-item-icon">
                    <i class="iconfont icon-moon"></i>
                </div>
                <div class="mdui-list-item-content">夜间模式</div>
                <label class="mdui-switch" id="darkmode">
                  <input type="checkbox" id="nightmode_switch"/>
                  <i class="mdui-switch-icon"></i>
                </label>
            </div>           
        </div>
    </div>

    
    <div id="sidebar-tab2" class="mdui-p-a-1">
        <div class="sidebar-overview">
            <div class="sidebar-avatar">
                
                    <img src="/icons/avatar.gif"/>
                
            </div>
            <div class="sidebar-author-name">John Doe</div>
            <div class="sidebar-description"></div>
        </div>
        <div class="sidebar-links">
            
                
                <div class="mdui-chip">
                    <span class="mdui-chip-icon"><i class="iconfont icon-mail"></i></span>
                    <a href="mailto:xxx@xxx.com" class="mdui-chip-title">E-Mail</a>
                </div>
            
                
                <div class="mdui-chip">
                    <span class="mdui-chip-icon"><i class="iconfont icon-github"></i></span>
                    <a target="_blank" rel="noopener" href="https://your.url" class="mdui-chip-title">GitHub</a>
                </div>
            
                
                <div class="mdui-chip">
                    <span class="mdui-chip-icon"><i class="iconfont icon-steam"></i></span>
                    <a target="_blank" rel="noopener" href="https://your.url" class="mdui-chip-title">Steam</a>
                </div>
            
                
                <div class="mdui-chip">
                    <span class="mdui-chip-icon"><i class="iconfont icon-weibo"></i></span>
                    <a target="_blank" rel="noopener" href="https://your.url" class="mdui-chip-title">Weibo</a>
                </div>
            
        </div>
        <ul class="mdui-list" mdui-collapse="{accordion: true}">
            <li class="mdui-collapse-item">
                <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                    <div class="mdui-list-item-icon">
                        <i class="iconfont icon-link"></i>
                    </div>
                    <div class="mdui-list-item-content">友情链接</div>
                    <div class="mdui-collapse-item-arrow">
                        <i class="mdui-list-item-icon iconfont icon-angle-down"></i>
                    </div>
                </div>
                <ul id="linksList" class="mdui-collapse-item-body mdui-list mdui-list-dense">
                    
                        <a target="_blank" rel="noopener" href="https://garybear.cn/hexo-theme-meadow/" class="mdui-list-item mdui-ripple">
                            Meadow说明文档
                        </a>
                    
                </ul>
            </li>
        </ul>
    </div>

    <div class="mdui-divider"></div>
    
    
</aside>
  
  <main id="main-contain" class="mdui-container mdui-m-t-5">
    <article id="article" class="mdui-card mdui-p-b-2 mdui-m-b-5">
  <header class="mdui-card-media">
    
    
      <div class="post-header"> 
  <a class="post-header-title" href="/2022/02/22/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/es6%E7%9A%84%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95/">数组的方法</a>
  <div class="post-header-meta">
    <span>
      <span class="iconfont icon-calendar"></span>
      发布于:&nbsp;2022-02-22
    </span>
    <span>
      <span class="iconfont icon-calendar-check"></span>
      更新于:&nbsp;2022-03-03
    </span>
    <span>
      <span class="iconfont icon-folder"></span>
      分类于:&nbsp;<a class="category-link" href="/categories/%E5%88%86%E7%B1%BB/">分类</a>
    </span>
    
      <span>
        <span class="iconfont icon-eye"></span>
        阅读次数:&nbsp;
        <span id="busuanzi_container_page_pv"><span id="busuanzi_value_page_pv"></span></span>
      </span>
    
  </div>
</div>   
    



    
    
    <div class="mdui-card-menu">
    
      <button class="mdui-btn mdui-btn-icon mdui-text-color-teal" mdui-menu="{target: '#share_menu', align: 'right'}"><i class="iconfont icon-share"></i></button>
      <ul class="mdui-menu" id="share_menu">
        <li class="mdui-menu-item">
          <a href="http://service.weibo.com/share/share.php?appkey=&title=数组的方法&url=http://example.com/2022/02/22/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/es6%E7%9A%84%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95/&pic=http://example.com/null&searchPic=false&style=simple" target="_blank" class="mdui-ripple">分享到 Weibo</a>
        </li>
        <li class="mdui-menu-item">
          <a href="https://twitter.com/intent/tweet?text=数组的方法&url=http://example.com/2022/02/22/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/es6%E7%9A%84%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95/&via=John Doe" target="_blank" class="mdui-ripple">分享到 Twitter</a>
        </li>
        <li class="mdui-menu-item">
          <a href="https://www.facebook.com/sharer/sharer.php?u=http://example.com/2022/02/22/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/es6%E7%9A%84%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95/" target="_blank" class="mdui-ripple">分享到 Facebook</a>
        </li>
        <li class="mdui-menu-item">
          <a href="https://plus.google.com/share?url=http://example.com/2022/02/22/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/es6%E7%9A%84%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95/" target="_blank" class="mdui-ripple">分享到 Google+</a>
        </li>
        <li class="mdui-menu-item">
          <a href="https://www.linkedin.com/shareArticle?mini=true&url=http://example.com/2022/02/22/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/es6%E7%9A%84%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95/&title=数组的方法" target="_blank" class="mdui-ripple">分享到 LinkedIn</a>
        </li>
        <li class="mdui-menu-item">
          <a href="http://connect.qq.com/widget/shareqq/index.html?site=吴豪阳的数据库&title=数组的方法&summary=&pics=http://example.com/null&url=http://example.com/2022/02/22/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/es6%E7%9A%84%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95/" target="_blank" class="mdui-ripple">分享到 QQ</a>
        </li>
        <li class="mdui-menu-item">
          <a href="https://telegram.me/share/url?url=http://example.com/2022/02/22/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/es6%E7%9A%84%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95/&text=数组的方法" target="_blank" class="mdui-ripple">分享到 Telegram</a>
        </li>
      </ul>
    
  </div>
  </header>
  
  
  
  
  <div class="post-tags">
    
      <i class="iconfont icon-tag">
        <a rel="tag" href = /tags/blog/ >blog</a>
      </i>
    
  </div>

  
  <div class="mdui-card-content mdui-typo mdui-p-x-4">
    <h2 id="数组的方法的分类"><a href="#数组的方法的分类" class="headerlink" title="数组的方法的分类"></a>数组的方法的分类</h2><h4 id="分为变异非变异两种"><a href="#分为变异非变异两种" class="headerlink" title="分为变异非变异两种"></a>分为变异非变异两种</h4><p> <code>变异的有 : </code></p>
<p> <code>非变异的有 </code></p>
<h2 id="reduce"><a href="#reduce" class="headerlink" title="reduce()"></a>reduce()</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">computer:&#123;</span><br><span class="line">  zongJia()&#123;</span><br><span class="line">      return this.(数组).reduce((a,b)=&gt;&#123;</span><br><span class="line">        return a= b.(单价)*b(数量)</span><br><span class="line">      &#125;,0)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="every-遍历数组的每一项-进行对比如果所有都满足为true-不满足为false"><a href="#every-遍历数组的每一项-进行对比如果所有都满足为true-不满足为false" class="headerlink" title="every() 遍历数组的每一项 进行对比如果所有都满足为true 不满足为false)"></a>every() 遍历数组的每一项 进行对比如果所有都满足为true 不满足为false)</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var att = [2, 1, 3, 4, 5, 6, 1, 111,]</span><br><span class="line">let att1 = att.every(item =&gt; &#123;</span><br><span class="line">    return item &gt;= 1</span><br><span class="line">&#125;);</span><br><span class="line">console.log(att1) //true;</span><br></pre></td></tr></table></figure>

<p>var att = [2, 1, 3, 4, 5, 6, 1, 111, ]</p>
<pre><code>let att1 = att.every(item =&gt; &#123;
    return item &gt; 1
&#125;);
console.log(att1) //false;
</code></pre>
<h2 id="filter-数组查询-返回符合的数据"><a href="#filter-数组查询-返回符合的数据" class="headerlink" title="filter() 数组查询 返回符合的数据"></a>filter() 数组查询 返回符合的数据</h2><p> <code>过滤数组，返回一个满足要求的数组</code></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">let arr = [1,2,3,4,5]</span><br><span class="line">let arr1 = arr.filter( (value, index) =&gt; value&lt;3)</span><br><span class="line">console.log(arr1)    // [1, 2]</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="map"><a href="#map" class="headerlink" title="map()"></a>map()</h2><p> <code>作用就是“映射”，也就是原数组被“映射”成对应新数组。</code></p>
<p> <code>方法返回一个新数组，这个新数组：由原数组中的每个元素调用一个指定方法后的返回值组成的新数组</code></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">ps: arr.forEach()和arr.map()的区别 </span><br><span class="line">* arr.forEach()是和for循环一样，是代替for。arr.map()是修改数组其中的数据，并返回新的数据。</span><br><span class="line">* arr.forEach() 没有return  arr.map() 有return</span><br></pre></td></tr></table></figure>

<h2 id="forEach-数组的遍历"><a href="#forEach-数组的遍历" class="headerlink" title="forEach() 数组的遍历"></a>forEach() 数组的遍历</h2><p> <code> 遍历数组的每一项无return 即使有return，也不会返回任何值，并且会影响原来的数组callback的参数</code></p>
<p> <code>value --当前索引的值 第一个值</code></p>
<p> <code>index --索引 第二个值</code></p>
<p> <code>array --原数组  第三个值</code></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var arr = [1,2,3,4]; </span><br><span class="line">var res = arr.forEach((item,index,arr)=&gt;&#123;     </span><br><span class="line"> arr[index] = item * 2; </span><br><span class="line"> return arr </span><br><span class="line">&#125;)</span><br><span class="line">console.log(arr); // [2,4,6,8]</span><br><span class="line">console.log(res); // undefined </span><br></pre></td></tr></table></figure>

<h2 id="sort-数组的排序"><a href="#sort-数组的排序" class="headerlink" title="sort() 数组的排序"></a>sort() 数组的排序</h2><p> <code> 顾名思义 就是将杂乱无章的数组 排列整齐</code></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">let arr = [8, 5, 1, 3, 7, 2, 6, 4]</span><br><span class="line">  console.log(arr.sort()); //[1, 2, 3, 4, 5, 6, 7, 8]</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="split"><a href="#split" class="headerlink" title="split()"></a>split()</h2><p> <code>将字符串转化为数组</code></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var arr = &#x27;123456789&#x27;</span><br><span class="line"></span><br><span class="line">console.log(arr.split(&#x27;&#x27;));// [&quot;1&quot;, &quot;2&quot;, &quot;3&quot;, &quot;4&quot;, &quot;5&quot;, &quot;6&quot;]</span><br></pre></td></tr></table></figure>

<h2 id="indexOf"><a href="#indexOf" class="headerlink" title="indexOf()"></a>indexOf()</h2><p> <code>查找某个元素的索引值，若有重复的，则返回第一个查到的索引值若不存在，则返回 -1</code></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let arr = [1,2,3,4,5,2]</span><br><span class="line">let arr1 = arr.indexOf(2)</span><br><span class="line">console.log(arr1)  // 1</span><br><span class="line">let arr2 = arr.indexOf(9)</span><br><span class="line">console.log(arr2)  // -1</span><br></pre></td></tr></table></figure>

<h2 id="lastIndexOf"><a href="#lastIndexOf" class="headerlink" title="lastIndexOf(),"></a>lastIndexOf(),</h2><p> <code> lastIndexOf 与 indexOf 相同点是都是返回的目标元素的索引 不同点就是 lastIndexOf 是从索引最大的一端开查找 indexOf 相反</code></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">let arr = [1, 2, 3, 4, 5, 2]</span><br><span class="line"></span><br><span class="line">  let arr1 = arr.lastIndexOf(2)</span><br><span class="line">  console.log(arr1)  // 5</span><br><span class="line">  let arr2 = arr.lastIndexOf(9)</span><br><span class="line">  console.log(arr2)  // -1</span><br></pre></td></tr></table></figure>

<h2 id="push-向数组的尾部添加一个元素-并且有返回值-（是新数据的长度）"><a href="#push-向数组的尾部添加一个元素-并且有返回值-（是新数据的长度）" class="headerlink" title="push() 向数组的尾部添加一个元素 并且有返回值 （是新数据的长度）"></a>push() 向数组的尾部添加一个元素 并且有返回值 （是新数据的长度）</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">`var listA = [1,2,3,4,5]`</span><br><span class="line"></span><br><span class="line">`var listB =  listA.push(7,8,9)`</span><br><span class="line"></span><br><span class="line">` console.log(listA) //这个是生成的新数组`</span><br><span class="line"></span><br><span class="line">` console.log(listB)  // 这个是它返回的数组的length （长度）`</span><br></pre></td></tr></table></figure>

<h2 id="pop-在数组尾部的删除一个元素-并且有返回值-（返回的是删除的元素）"><a href="#pop-在数组尾部的删除一个元素-并且有返回值-（返回的是删除的元素）" class="headerlink" title="pop() 在数组尾部的删除一个元素 并且有返回值 （返回的是删除的元素）"></a>pop() 在数组尾部的删除一个元素 并且有返回值 （返回的是删除的元素）</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">`var listA = [1,2,3,4,5]`</span><br><span class="line"></span><br><span class="line">`var listB =  listA.pop()`</span><br><span class="line"></span><br><span class="line">`console.log(listB) // 返回删除的的元素`</span><br></pre></td></tr></table></figure>

<h2 id="shift-在数组头部的删除一个元素-（（返回的是删除的元素））"><a href="#shift-在数组头部的删除一个元素-（（返回的是删除的元素））" class="headerlink" title="shift() 在数组头部的删除一个元素 （（返回的是删除的元素））"></a>shift() 在数组头部的删除一个元素 （（返回的是删除的元素））</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">`var listA = [1,2,3,4,5]`</span><br><span class="line"></span><br><span class="line">`var listB =  listA.shift()`</span><br><span class="line"></span><br><span class="line">`console.log(listB) // 返回删除的的元素`</span><br></pre></td></tr></table></figure>

<h2 id="unshift-在数组头部的添加一个元素-（（返回新数组的length））"><a href="#unshift-在数组头部的添加一个元素-（（返回新数组的length））" class="headerlink" title="unshift() 在数组头部的添加一个元素 （（返回新数组的length））"></a>unshift() 在数组头部的添加一个元素 （（返回新数组的length））</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">`var listA = [1,2,3,4,5]`</span><br><span class="line"></span><br><span class="line">`var listB =  listA.unshift(list)`</span><br><span class="line"></span><br><span class="line">`console.log(listB) // 返回新数组的length`</span><br></pre></td></tr></table></figure>

<h2 id="splice-数组剪切-并且有两个值"><a href="#splice-数组剪切-并且有两个值" class="headerlink" title="splice() 数组剪切  并且有两个值"></a>splice() 数组剪切  并且有两个值</h2><h5 id="第一个-表示从哪个地方开始-值是这个数组的index"><a href="#第一个-表示从哪个地方开始-值是这个数组的index" class="headerlink" title="第一个 表示从哪个地方开始(值是这个数组的index)"></a>第一个 表示从哪个地方开始(值是这个数组的index)</h5><h5 id="第二个-表示到那个地方结束"><a href="#第二个-表示到那个地方结束" class="headerlink" title="第二个 表示到那个地方结束"></a>第二个 表示到那个地方结束</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">` var list = [1,2,3,4,5,6]`</span><br><span class="line"></span><br><span class="line">` var listB = list.splice(1,3)`</span><br><span class="line"></span><br><span class="line">` console.log(list) //这个是 剪切后的数组`</span><br><span class="line"></span><br><span class="line">` console.log(listB) //这个是 剪切后的数据  那这个数组来说就是 `</span><br><span class="line">`从下标为1 也就是从2 开始到 下标为3 到4结束  `</span><br><span class="line"></span><br><span class="line">` 返回的的值  为  2   3   4 `</span><br></pre></td></tr></table></figure>

<h2 id="join-如果是是var-出来的数组-使用的是时候-比如-1-2-3-如果只是用-join-属性是-返回的是一个-不带-【】-的1-2-3"><a href="#join-如果是是var-出来的数组-使用的是时候-比如-1-2-3-如果只是用-join-属性是-返回的是一个-不带-【】-的1-2-3" class="headerlink" title="join() // 如果是是var 出来的数组 使用的是时候 比如 [1, 2, 3] 如果只是用 join() 属性是 返回的是一个 不带 【】 的1, 2, 3"></a>join() // 如果是是var 出来的数组 使用的是时候 比如 [1, 2, 3] 如果只是用 join() 属性是 返回的是一个 不带 【】 的1, 2, 3</h2><p> <code>   // 如果是 join(有值的话) 就是返回一个  1+那个值，2+那个值，3最后一个没有</code></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">`// var att = [1, 2, 3];`</span><br><span class="line"></span><br><span class="line">`   // console.log(att);`</span><br><span class="line"></span><br><span class="line">`  // console.log(att.join());值为 1,2,3 并且不带数组符号 值与值 之间用逗号隔开  `</span><br><span class="line"></span><br><span class="line">`  // console.log(att.join(1)); 值为 11,21,3 并且不带数组符号 值与 之间不隔开 `</span><br></pre></td></tr></table></figure>

<h2 id="concat"><a href="#concat" class="headerlink" title="concat()"></a>concat()</h2><p> <code>用于连接两个或多个数组</code></p>
<p> <code>参数：参数可以是具体的值，也可以是数组对象。可以是任意多个</code></p>
<p> <code>返回值：返回连接后的新数组</code></p>
<p> <code>是否改变原数组：不改变</code></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let ary8 = [&#x27;你&#x27;];</span><br><span class="line"></span><br><span class="line">let ary80 = ary8.concat(&#x27;好&#x27;);</span><br><span class="line"></span><br><span class="line">console.log(ary80);//[&quot;你&quot;, &quot;好&quot;]</span><br></pre></td></tr></table></figure>

<h2 id="slice"><a href="#slice" class="headerlink" title="slice(),"></a>slice(),</h2><p> <code>是用来删除数组中的一个或者多个数据   他有两个参数 第一个参数是从第几个个开始 第二个参数   是到那个数据结束</code></p>
<p> <code>如果只有一个参数  下标是几就从那个位置开始  依次删除 </code></p>
<p> <code>array.slice(n, m)，从索引n开始查找到m处（不包含m）</code></p>
<p> <code>array.slice(n) 第二个参数省略，则一直查找到末尾</code></p>
<p> <code>array.slice(0)原样输出内容，可以实现数组克隆</code></p>
<p> <code>array.slice(-n, -m) slice支持负参数，从最后一项开始算起，-1为最后一项，-2为倒数第二项</code></p>
<p> <code>返回值：返回一个新数组</code></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">是否改变原数组：不改变</span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var arr = [1, 2, 33, 4, 5.6, 4, 4]</span><br><span class="line">// console.log(arr.slice(1, 3));</span><br><span class="line">// console.log(arr.slice(1));</span><br><span class="line">var add = arr.slice(1, 3)</span><br><span class="line">arr.slice(1, 3),</span><br><span class="line">    console.log(add)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

  </div>
  <!--文末结束语-->
  
    <div style="text-align:center;color: #ccc;font-size:24px;"> --- 本文结束 <i class="iconfont icon-heartbeat" style="font-size:24px;"></i> The End --- </div>
  
  <!--页脚广告-->
  
  <div class="mdui-divider"></div>
  
  <nav>
    
      <a rel="prev" class="post-nav-item mdui-float-left" href="/2022/02/22/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/es6%E7%9A%84%E6%95%B0%E7%BB%84li/">
        <i class="iconfont icon-angle-left"></i>
        <span>source</span>
      </a>
    
    
      <a rel="next" class="post-nav-item mdui-float-right" href="/2022/02/22/hello-world/">
        <span>Hello World</span>
        <i class="iconfont icon-angle-right"></i>
      </a>
    
  </nav>
</article>




  <div class="toc-button"  style="z-index: 100;">
    <button class="mdui-fab mdui-ripple mdui-color-teal" mdui-menu="{target: '#toc'}"><i class="iconfont icon-list"></i></button>
    <ul class="mdui-menu" id="toc">
      <li class="mdui-menu-item">
        <a href="/2022/02/22/%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95/es6%E7%9A%84%E6%95%B0%E7%BB%84%E8%AF%AD%E6%B3%95/" id="toc-header" class="mdui-ripple">文章目录</a>
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95%E7%9A%84%E5%88%86%E7%B1%BB"><span class="toc-number">1.</span> <span class="toc-text">数组的方法的分类</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%88%86%E4%B8%BA%E5%8F%98%E5%BC%82%E9%9D%9E%E5%8F%98%E5%BC%82%E4%B8%A4%E7%A7%8D"><span class="toc-number">1.0.1.</span> <span class="toc-text">分为变异非变异两种</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#reduce"><span class="toc-number">2.</span> <span class="toc-text">reduce()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#every-%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84%E7%9A%84%E6%AF%8F%E4%B8%80%E9%A1%B9-%E8%BF%9B%E8%A1%8C%E5%AF%B9%E6%AF%94%E5%A6%82%E6%9E%9C%E6%89%80%E6%9C%89%E9%83%BD%E6%BB%A1%E8%B6%B3%E4%B8%BAtrue-%E4%B8%8D%E6%BB%A1%E8%B6%B3%E4%B8%BAfalse"><span class="toc-number">3.</span> <span class="toc-text">every() 遍历数组的每一项 进行对比如果所有都满足为true 不满足为false)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#filter-%E6%95%B0%E7%BB%84%E6%9F%A5%E8%AF%A2-%E8%BF%94%E5%9B%9E%E7%AC%A6%E5%90%88%E7%9A%84%E6%95%B0%E6%8D%AE"><span class="toc-number">4.</span> <span class="toc-text">filter() 数组查询 返回符合的数据</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#map"><span class="toc-number">5.</span> <span class="toc-text">map()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#forEach-%E6%95%B0%E7%BB%84%E7%9A%84%E9%81%8D%E5%8E%86"><span class="toc-number">6.</span> <span class="toc-text">forEach() 数组的遍历</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#sort-%E6%95%B0%E7%BB%84%E7%9A%84%E6%8E%92%E5%BA%8F"><span class="toc-number">7.</span> <span class="toc-text">sort() 数组的排序</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#split"><span class="toc-number">8.</span> <span class="toc-text">split()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#indexOf"><span class="toc-number">9.</span> <span class="toc-text">indexOf()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#lastIndexOf"><span class="toc-number">10.</span> <span class="toc-text">lastIndexOf(),</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#push-%E5%90%91%E6%95%B0%E7%BB%84%E7%9A%84%E5%B0%BE%E9%83%A8%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0-%E5%B9%B6%E4%B8%94%E6%9C%89%E8%BF%94%E5%9B%9E%E5%80%BC-%EF%BC%88%E6%98%AF%E6%96%B0%E6%95%B0%E6%8D%AE%E7%9A%84%E9%95%BF%E5%BA%A6%EF%BC%89"><span class="toc-number">11.</span> <span class="toc-text">push() 向数组的尾部添加一个元素 并且有返回值 （是新数据的长度）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#pop-%E5%9C%A8%E6%95%B0%E7%BB%84%E5%B0%BE%E9%83%A8%E7%9A%84%E5%88%A0%E9%99%A4%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0-%E5%B9%B6%E4%B8%94%E6%9C%89%E8%BF%94%E5%9B%9E%E5%80%BC-%EF%BC%88%E8%BF%94%E5%9B%9E%E7%9A%84%E6%98%AF%E5%88%A0%E9%99%A4%E7%9A%84%E5%85%83%E7%B4%A0%EF%BC%89"><span class="toc-number">12.</span> <span class="toc-text">pop() 在数组尾部的删除一个元素 并且有返回值 （返回的是删除的元素）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#shift-%E5%9C%A8%E6%95%B0%E7%BB%84%E5%A4%B4%E9%83%A8%E7%9A%84%E5%88%A0%E9%99%A4%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0-%EF%BC%88%EF%BC%88%E8%BF%94%E5%9B%9E%E7%9A%84%E6%98%AF%E5%88%A0%E9%99%A4%E7%9A%84%E5%85%83%E7%B4%A0%EF%BC%89%EF%BC%89"><span class="toc-number">13.</span> <span class="toc-text">shift() 在数组头部的删除一个元素 （（返回的是删除的元素））</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#unshift-%E5%9C%A8%E6%95%B0%E7%BB%84%E5%A4%B4%E9%83%A8%E7%9A%84%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E5%85%83%E7%B4%A0-%EF%BC%88%EF%BC%88%E8%BF%94%E5%9B%9E%E6%96%B0%E6%95%B0%E7%BB%84%E7%9A%84length%EF%BC%89%EF%BC%89"><span class="toc-number">14.</span> <span class="toc-text">unshift() 在数组头部的添加一个元素 （（返回新数组的length））</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#splice-%E6%95%B0%E7%BB%84%E5%89%AA%E5%88%87-%E5%B9%B6%E4%B8%94%E6%9C%89%E4%B8%A4%E4%B8%AA%E5%80%BC"><span class="toc-number">15.</span> <span class="toc-text">splice() 数组剪切  并且有两个值</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%AC%AC%E4%B8%80%E4%B8%AA-%E8%A1%A8%E7%A4%BA%E4%BB%8E%E5%93%AA%E4%B8%AA%E5%9C%B0%E6%96%B9%E5%BC%80%E5%A7%8B-%E5%80%BC%E6%98%AF%E8%BF%99%E4%B8%AA%E6%95%B0%E7%BB%84%E7%9A%84index"><span class="toc-number">15.0.0.1.</span> <span class="toc-text">第一个 表示从哪个地方开始(值是这个数组的index)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%AC%AC%E4%BA%8C%E4%B8%AA-%E8%A1%A8%E7%A4%BA%E5%88%B0%E9%82%A3%E4%B8%AA%E5%9C%B0%E6%96%B9%E7%BB%93%E6%9D%9F"><span class="toc-number">15.0.0.2.</span> <span class="toc-text">第二个 表示到那个地方结束</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#join-%E5%A6%82%E6%9E%9C%E6%98%AF%E6%98%AFvar-%E5%87%BA%E6%9D%A5%E7%9A%84%E6%95%B0%E7%BB%84-%E4%BD%BF%E7%94%A8%E7%9A%84%E6%98%AF%E6%97%B6%E5%80%99-%E6%AF%94%E5%A6%82-1-2-3-%E5%A6%82%E6%9E%9C%E5%8F%AA%E6%98%AF%E7%94%A8-join-%E5%B1%9E%E6%80%A7%E6%98%AF-%E8%BF%94%E5%9B%9E%E7%9A%84%E6%98%AF%E4%B8%80%E4%B8%AA-%E4%B8%8D%E5%B8%A6-%E3%80%90%E3%80%91-%E7%9A%841-2-3"><span class="toc-number">16.</span> <span class="toc-text">join() &#x2F;&#x2F; 如果是是var 出来的数组 使用的是时候 比如 [1, 2, 3] 如果只是用 join() 属性是 返回的是一个 不带 【】 的1, 2, 3</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#concat"><span class="toc-number">17.</span> <span class="toc-text">concat()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#slice"><span class="toc-number">18.</span> <span class="toc-text">slice(),</span></a></li></ol>
      </li>
    </ul>
  </div>



    <div id="comment" class="mdui-card mdui-p-a-2 mdui-m-b-5">
      <div class="mdui-tab" mdui-tab>
        
          <a href="#comment-tab0" class="mdui-ripple">gitalk</a>
        
          <a href="#comment-tab1" class="mdui-ripple">livere</a>
        
      </div>
      
        <div id="comment-tab0" class="mdui-p-a-2">
          <div id="gitalk-container"></div>
<link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
<script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/js-md5@0.7.3/src/md5.min.js"></script>
<script>
  var gitalk = new Gitalk({
    clientID: '',
    clientSecret: '',
    repo: '',
    owner: '',
    admin: [''],
    id:  md5(location.pathname) ,
    distractionFreeMode: 'true',
  });
  gitalk.render('gitalk-container');
</script>
        </div>
      
        <div id="comment-tab1" class="mdui-p-a-2">
          <div id="lv-container" data-id="city" data-uid="">
  <script type="text/javascript">
    (function (d, s) {
      var j, e = d.getElementsByTagName(s)[0];
      if (typeof LivereTower === 'function') { return; }
      j = d.createElement(s);
      j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
      j.async = true;
      e.parentNode.insertBefore(j, e);
    })(document, 'script');
  </script>
  <noscript>Please enable JavaScript to view the comments powered by LiveRe.</noscript>
</div>
        </div>
      
    </div>

  </main>
  <footer id="footer" class="mdui-text-center mdui-m-t-5 mdui-p-b-2 mdui-p-t-4 mdui-color-theme">
  <div class="mdui-container">
    <div class="mdui-row">
      
        <a href="https://beian.miit.gov.cn" rel="noopener" target="_blank"></a>
      
      <span>
        &copy; 2015 - 2022 
        
          <span style="color:#d9333f" class="iconfont icon-heart"></span>
        
        John Doe
      </span>
    </div>
    <div class="mdui-row">
      
        <div class="mdui-col-xs-6 mdui-text-right">
          <span>Powered by <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a></span>
        </div>
        <div class="mdui-col-xs-6 mdui-text-left">
          <span>Theme: <a href="https://github.com/kb1000fx/Meadow" rel="noopener" target="_blank">Meadow</a></span>
        </div>
      
    </div>
    <div class="mdui-row">
      
        <div class="mdui-col-xs-6 mdui-text-right">
          <span id="busuanzi_container_site_uv" style="display: none;"> <span class="iconfont icon-user"></span>总访客量 <span id="busuanzi_value_site_uv"></span></span>
        </div>
        <div class="mdui-col-xs-6 mdui-text-left">
          <span id="busuanzi_container_site_pv" style="display: none;"> <span class="iconfont icon-eye"></span>总访问量 <span id="busuanzi_value_site_pv"></span></span>
        </div>
      
    </div>
 </div>
</footer>
  
  <button id="gotop" class="mdui-fab mdui-fab-fixed mdui-fab-hide mdui-ripple mdui-color-teal" style="z-index:100;"><i class="iconfont icon-arrowup"></i></button>
  
  

    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>




    <script src="https://cdn.jsdelivr.net/npm/mermaid@8.4.8/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({
        startOnLoad: true,
        theme: "default"
    });</script>




    
<script src="/js/mdui.min.v1.0.0.js"></script>




<script src="/js/meadow.js"></script>

</body>
</html >